<template>
	<div>
		<van-nav-bar
		  title="我卖出的"
		  left-arrow
		  @click-left="onClickLeft"
		  :border="false"
		>		
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
	    </van-nav-bar>		
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
		  <van-list
		    v-model="loading"
		    :finished="finished"
		    finished-text="我也是有底线的"
		    @load="onLoad"
		    :immediate-check="false"
		  >		  
		    <div class="li" v-for="(item,index) in list" :class="{active:index==list.length-1}">
		    	<div class="left" @click="detail">
		    		<img :src="item.imgUrl" alt="" />
		    	</div>
		    	<div class="right">
		    		<div @click="detail">
			    		<div class="title">{{item.title}}</div>
	                    <div class="price">
	                    	<span class="word1">实收款:</span>
	                    	<span class="word2">¥ {{item.price}}</span>
	                    </div>
	                    <div class="status">{{formatStatus(item.status,item.isEvaluate)}}</div>
                    </div>
                    <div class="btn">
                    	<div class="cf">
                    		<img src="../../../../static/img/lanhu/22.png" alt="" @click="contact"/>
                    	</div>
                    	<div class="action">
                    		<span style="margin-right: 4px;">查看评价</span>
                    		<span @click="showMore">...</span>
                    	</div>
                    </div>
		    	</div>
		    </div>

		  </van-list>
		  
		</van-pull-refresh> 		

        <van-popup v-model="showMoreWin">
        	<div class="showMoreWin">
				<van-cell-group>
				  <van-cell title="查看钱款" @click=""/>
				  <van-cell title="查看评价" />
				  <van-cell title="删除订单" />
				</van-cell-group>        		
        	</div>
        </van-popup>
	</div>	
</template>

<script>
let str="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586497011203&di=eeb3d779ad0acd4c396c33e6ad9352df&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180801%2F22%2F1533134801-dhwuEsJZWp.jpg"	
const list=[
    {imgUrl:str,title:'彩虹人amm3/2雨哦大奖等你拿2雨哦大奖等你拿',price:530,status:1,isEvaluate:0},
    {imgUrl:str,title:'彩虹人amm3/2雨哦大奖等你拿2雨哦大奖等你拿',price:530,status:1,isEvaluate:0}, 
    {imgUrl:str,title:'彩虹人amm3/2雨哦大奖等你拿2雨哦大奖等你拿',price:530,status:1,isEvaluate:0}, 
    {imgUrl:str,title:'彩虹人amm3/2雨哦大奖等你拿2雨哦大奖等你拿',price:530,status:1,isEvaluate:0}, 
    {imgUrl:str,title:'彩虹人amm3/2雨哦大奖等你拿2雨哦大奖等你拿',price:530,status:1,isEvaluate:0}
]
import { Dialog } from 'vant';	
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
       	  loading: false,    // 是否处于数据加载状态 
	      finished: false,   // 是否处于数据最底部的状态 
	      refreshing: false, // 是否处于下拉刷新状态         
          pageNum:1,         // 当前数据的页码数
          pages:0,           // 储存数据的最大页码数
          list:list,            // 储存数据用
          showMoreWin:false
       }
	},
	methods: {
	   // 转化状态
	   formatStatus(status,isEvaluate){
	   	let str=''
	   	console.log(status)
		switch(status) {
		     case 1:
		        str='交易完成'
		        break;
		     case n:
		        代码块
		        break;
		     default:
		        默认代码块
		} 	   	
	   },
	   // 联系买家
	   contact(){
	   	alert('跳转到联系买家界面')
	   },
	   // 跳转详情
	   detail(){
	   	 alert('跳转到详情页面')
	   },
	   // 显示更多的操作	
	   showMore(){
	   	  this.showMoreWin=true
	   },
	   // 删除订单	
	   delOrder(){
		  this.$dialog.confirm({
			  title: '',
			  message: '确认删除订单？',
			  confirmButtonText:'确认'
		  }).then(() => {
			  // on confirm
		  }).catch(() => {
			  // on cancel
		  });	   	 
	   },
	   // 下拉刷新函数	
	   onRefresh() {
		  setTimeout(() => {
	          this.pageNum=1
	          this.list=[]
	          this.getData()	
	          this.finished = false;
	          this.loading=false
			  this.refreshing = false;
		  }, 1000);          
	   },
	   // 上拉加载函数
	   onLoad(){	   	 
		 setTimeout(() => {		 	
	        if (this.refreshing) {
	          this.list = [];
	          this.refreshing = false;
	        }	        
	        this.pageNum++
	        if(this.pageNum>this.pages){this.finished = true;}
	        else{
              this.getData()
	          this.loading = false;	        	
	        }
	      }, 1000);   	
	   },		
       // 获取数据
       getData(){
       	    let that=this
		    this.$Axios.postRequest(this.url1,{userId:this.userId,goodsState:'2'},{pageNum:this.pageNum,pageSize:'5'})
		    .then(function(res) {
		    	that.pages=res.page.pages
                that.list=that.list.concat(res.page.records)
		    })       	
       }
	},
	mixins:[publicFun],	
	mounted() {
	    this.userId=this.$router.currentRoute.query.userId;
		// this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
.van-nav-bar{background: #FFD630;}
.li{padding: 20px 20px 10px;border-bottom: 1px solid #e5e5e5;display: flex;
   .left{img{width: 92px;height: 92px;display: block;border-radius: 2px;}}
   .right{margin-left: 15px;flex: 1;
       .title{font-size: 15px;font-weight:bold;display: -webkit-box;-webkit-box-orient: vertical;
       -webkit-line-clamp: 1;overflow: hidden;}
       .price{margin: 14px 0;font-size: 14px;.word2{color: $fc1;font-weight: 500;}} 
       .status{color: $fc1;}
       .btn{display: flex;justify-content: space-between;  margin-top: 10px;align-items: center;     	  
          .cf{img{width: 91px;height: 23px;display: block;}}
          .action{display: flex;span{padding: 2px 10px;border:1px solid $bc1;font-size: 13px;display: block;}}
       	}
   }
}
.li.active{border-bottom: none;}
.van-dialog__confirm{background: red;}
.showMoreWin{width: 300px;background: #fff;}
</style>